<template>
  <div>
    <el-table
      :data="lessons"
      style="width: 100%"
      class="lesson-list"
      :cell-style="getCellStyle"
      stripe
    >
      <el-table-column
        prop="title"
        label="课程一览"
        min-width="300"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from "element-plus";
import axios from "axios";

export default {
  name: "CourseLessons",
  components: {
    ElTable,
    ElTableColumn,
  },
  props: {
    courseId: String,
  },
  data() {
    return {
      lessons: [],
      isLoading: false,
    };
  },
  methods: {
    getLessons() {
      this.isLoading = true;
      axios
        .get(`http://localhost:8080/Course/lessons?courseId=${this.courseId}`)
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            this.lessons.push({
              // lesson or chapter
              lessonId: res.data[i].lessonId,
              title: res.data[i].title,
            });
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    getCellStyle({ row }) {
      if (row.lessonId === "chapter") {
        return { fontWeight: "bold" };
      }
      return {};
    },
  },
  beforeMount() {
    this.getLessons();
  },
};
</script>

<style scoped>
.lesson-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 37vh;
  overflow-y: scroll;
  border: 3px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  box-shadow: 0px, 0px, 10px, rgba(0, 0, 0, 0.1);
}
</style>
